<script setup>
	import { ref, reactive, computed, getCurrentInstance, watch, shallowRef } from 'vue';
	import { useRouter } from 'vue-router';

	const router = useRouter();
	const { proxy } = getCurrentInstance();
	const props = defineProps({
		// 接口地址
		url: {},

		//默认表格高度
		height: {
			type: String,
			default: '636px',
		},

		//表格显示字段和配置
		columns: {
			type: Array,
			default: () => {
				return [];
			},
		},

		//是否为斑马纹 table	
		stripe: {
			type: Boolean,
			default: false,
		},

		//是否带有纵向边框	
		border: {
			type: Boolean,
			default: false,
		},

		//表格尺寸
		size: {
			type: String,
			default: 'large',
		},

		//是否显示表头	
		showHeader: {
			type: Boolean,
			default: true,
		},

		//是否要高亮当前行	
		highlightCurrentRow: {
			type: Boolean,
			default: false,
		},

		//表头的自定义样式名称
		headerRowClassName: {
			type: String,
			default: 'headerRowClassName'
		},

		//单元格样式
		cellClassName: {
			type: String,
			default: 'cellClassName'
		},

		//行样式
		rowClassName: {
			type: String,
			default: 'rowClassName'
		},


		//是否显示分页
		isPage: {
			type: Boolean,
			default: false,
		},
		//分页数据
		page: {
			type: Object,
			default: () => {
				return { current: 1, limit: 15, total: 0, limits: [10, 15, 20, 30, 50, 100] };
			},
		},
		//表格数据-本地数据
		localData: {},
		//是否自动请求列表数据
		isAutoHttp: {
			type: Boolean,
			default: true,
		},
		//loading
		loading: {
			type: Boolean,
			default: false,
		},

		//是否显示复选框
		isSelection: {
			type: Boolean,
			default: false
		},

		//返回数据数据的key
		resultKey: {
			type: String,
			default: 'data',
		},
	});

	const emit = defineEmits(['pageChange', 'rowClick']); //子组件和父组件通讯

	const pageData = ref(JSON.parse(JSON.stringify(props.page))); //分页数据

	const dataSource = ref([]); //表格数据
	const selfLoading = ref(false); //加载数据loading

	// watch -----------------------------------------
	//监听父组件复选框值
	watch(
		() => props.selectedKeys,
		(newVal, oldVal) => {
			selectedKeysData.value = JSON.parse(JSON.stringify(newVal));
		}, { deep: true }
	);

	//表格列名
	const columnList = ref(JSON.parse(JSON.stringify(props.columns)));

	// methods -----------------------------------------
	//获取表格数据
	function getData() {
		if (!props.url) {
			// return proxy.$msg.err('请求接口地址不能为空！');
		}
		let params = {}
		const page = {
			page: pageData.value.current,
			limit: pageData.value.limit,
		};
		if (props.method == 'post') params = { ...params, ...page }; //合并分页搜索添加
		if (selfLoading.value) return; //loading
		selfLoading.value = true;
		props.url({ ...params, ...props.customSearch }, props.urlParams).then((res) => {
			dataSource.value = res[props.resultKey] || [];
			pageData.value.total = res.totalCount; //总条数
			selfLoading.value = false;
			emit('callBack', res); //把数据返回父组件
		}).catch((err) => {
			selfLoading.value = false;
		});
	}

	//查询
	function search() {
		pageData.value = JSON.parse(JSON.stringify(props.page)); //分页数据
		if (props.isResetSelectedKeys) selectedKeysData.value = [];
		getData();
	}

	//分页事件
	function change(page) {
		pageData.value = page;
		pageData.value.limits = props.page.limits;
		if (props.localData) {
			//如果使用的是本地数据，分页时通知父组件
			emit('pageChange', page);
		} else {
			getData();
		}
	}

	/****** 表格编辑数据 *******/
	const formRef = ref(null);

	function assetFrom(fromData = null, eve = '') {
		let params = { data: fromData, opType: eve, title: props.layerParams.title };
		params = { ...params, ...props.editParams };
		const vNode = h(props.editPage, params);
		formRef.value = vNode;
		return vNode;
	}

	//created -----------------------------------------
	//获取数据-如果有本地数据优先使用本地数据
	if (props.localData) {
		dataSource.value = props.localData;
	} else if (props.isAutoHttp) {
		search();
	}

	//监听搜索条件的值
	watch(
		() => props.search,
		(newVal, oldVal) => {
			let searchPars = proxy.$common.searchPars(newVal); //搜索条件
			const pageCfg = { page: pageData.value.current, limit: pageData.value.limit };
			polExportOpt.value.params = { ...searchPars, ...props.customSearch, ...pageCfg };
		}, { deep: true }
	);

	//获取选中的数据
	function getSelectData() {

	}

	const selectable = (row) => ![1, 2].includes(row.id)

	//行单击监听事件
	const rowClick = (data) => {
		emit('rowClick', data);
	}

	// 输出组件的方法，让外部组件可以调用
	defineExpose({
		search, //查询方法
	});
</script>

<template>
	<div :style="`height: ${isPage ? `calc(${height} + 50px)` : height}`">
		<el-table @row-click="rowClick" :data="dataSource" :height="height" width="100%" :stripe="stripe" :border="border" :size="size" :show-header="showHeader" :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :header-row-class-name="headerRowClassName"
			:cell-class-name="cellClassName">
			<el-table-column v-if="isSelection" type="selection" :selectable="selectable" width="55" align="center" />
			<template v-for="(item, index) in columnList" :key="index">
				<el-table-column :width="item.width" :label="item.label" :min-width="item.minWidth || '30'" :fixed="item.fixed" :sortable="item.sortable" :align="item.align">
					<template #default="{ row, column, $index }">
						<template v-if="item.slot">
							<!-- 自定义插槽 -->
							<slot :name="item.key" :row="row" :rowIndex="$index" />
						</template>
						<template v-else>
							{{row[item.key]}}
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<div class="flex justify-end margin-top padding-right" v-if="isPage">
			<div class="flex align-center">
				<slot name="pageLeft"></slot>
				<el-pagination background layout="prev, pager, next" :total="1000" />
			</div>
		</div>
		<!-- 公共弹窗按钮 -->
		<!-- <lay-layer :key="layTemplate.key" v-model="layerVisible" :shade-opacity="0.5" :shade-close="false" :title="layTemplate.title" :area="layTemplate.area" :btn="layTemplate.action">
			<div class="padding">
				<component :is="layTemplate.currentComponent" ref="childRef" :data="layTemplate.data" :opType="layTemplate.opType"></component>
			</div>
		</lay-layer> -->
	</div>
</template>

<style lang="scss" scoped>

</style>